<template>
  <!--面包屑-->
  <div style="margin-bottom: 30px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link to="/Materials/ShowMaterialRequisition">物资领用</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>领用申请</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  
  
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
  
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入领用标题"  disabled/>
      </el-form-item>
  
      <el-form-item label="用途描述" prop="usageDescription">
        <el-input v-model="form.usageDescription" :rows="3" type="textarea" disabled/>
      </el-form-item>
  
      <el-form-item label="备注" prop="materialRequisitNotes">
        <el-input v-model="form.materialRequisitNotes" :rows="3" type="textarea" disabled/>
      </el-form-item>
  
      <el-form-item label="选择领用物品:" prop="materialStoreId">

      </el-form-item>
  
      <div style="margin-left: 95px;margin-bottom: 30px;">
        <table border style="border-collapse: collapse;width: 100%;background-color:gainsboro;text-align: center;" >
        <thead></thead>
        <tbody>
          <tr>
            <td>货物名称</td>
            <td>类型</td>
            <td>材质</td>
            <td>规格</td>
            <td>产地</td>
            <td>仓库数量</td>
            <td>领用数量</td>
            <td>操作</td>
          </tr>
  
          <tr v-for="item in sotreDataListByIdData" :key="item.materialRequisitionId">
            <td>{{ item.nameOfGoods }}</td>
            <td>{{ item.materialStoreType }}</td>
            <td>{{ item.material }}</td>
            <td>{{ item.specifications }}</td>
            <td>{{ item.countryName }}</td>
            <td>{{ item.number }}</td>
            <td>
              <el-input v-model="item.quantityReceived" disabled></el-input>
            </td>
          </tr>
        </tbody>
      </table>
      </div>
      
      <el-form-item label="备注" prop="notes">
          <el-input v-model="from.approvalNotes" :rows="3" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>

      <el-form-item label="转批人" prop="notes">
          <el-select v-model="from.subgrantor" placeholder="请选择转批人名字" style="width: 240px;"  >
      <el-option v-for="item in username" :key="item.id" :label="item.name" :value="item.name"/>
    </el-select>
        </el-form-item>
    </el-form>



    <el-form-item>
          <el-button type="primary" size="large" @click="submitForm()" :disabled="from.subgrantor==''">通过并转批</el-button>&nbsp;&nbsp;
          <el-button size="large" @click="Cancel()">拒绝</el-button>&nbsp;&nbsp;
          <el-button type="success" size="large" @click="onSubmit()">通过并终止转批</el-button>&nbsp;&nbsp;
        </el-form-item>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref, onMounted, computed } from 'vue'
  import axios from 'axios';
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  import {useRoute,useRouter} from 'vue-router'
  import { number } from 'echarts';
  
  const route = useRoute();
  const router = useRouter();
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  
  onMounted(() => {
    getMaterialRequisitionById()

    getUserSelect()
  })
  
    //审批表
    const from=reactive({
    approvalResult:'',
    approvalNotes:'',
    approver:'',
    materialRequisitionId:'',
    subgrantor:''
})

  const form: any = reactive({
    materialRequisitionId:'',
    // companyID: '',
    // user_Id:'',
     title: "",
     usageDescription: "",
    materialRequisitNotes: "",
    // collectionDate:'',
    approvalStatus: 10,
    // recipient:'',
    materialRequisitionDtos:[]
  })
  
  //校验
  const rules = reactive<FormRules>({
    title: [
      { required: true, message: '请输入领用标题', trigger: 'blur' },
    ],
    usageDescription: [
      { required: true, message: '请输入用途描述', trigger: 'blur' },
    ],
  })

  //反填
  const getMaterialRequisitionById = () => {
    axios.get('/mread//api/ShwoMaterialRequisition/ReverseMaterialRequisition', {
      params: {
        MaterialRequisitionId:route.query.materialRequisitionId
      }
    }).then(res=>{
    //console.log(res);
      let materialData: any = res.data.data;
      let materialRequisitionId:any =route.query.materialRequisitionId;
      form.title = materialData.title;
      form.usageDescription= materialData.usageDescription;
      form.materialRequisitNotes = materialData.materialRequisitNotes;
      GetsotreDataList(materialRequisitionId)
  }).catch(err=>{
    console.log(err);
    
  })    
  }

  //反填物品领用信息
  const sotreDataListByIdData:any=ref([])
  const GetsotreDataList = (materialRequisitionId:number) => {
    axios.get('/mread/api/ShwoMaterialRequisition/ReverseStorageMaterials?MaterialRequisitionId='+materialRequisitionId).then(res=>{
      // console.log(res);
      if (res.data.data.length > 0) {
        sotreDataListByIdData.value.push(res.data.data[0]) ;
      }

  
    }).catch(err=>{
      console.log(err);
      
    })    
  }

  //用户名称列表
  const UserSelectData: any = ref([])
    const username: any = ref([])
const getUserSelect=()=>{
  axios.get('http://1.117.93.87:8000/rbacdu/api/User/UserSelectShow').then(res=>{
    //console.log(res);
    UserSelectData.value = res.data.data
    username.value =UserSelectData.value.filter((o:any)=>o.name!=localStorage.getItem('username'));
  }).catch(err=>{
    console.log(err);
    
  })    
    }

//同意
const onSubmit = () => {
  let hh={
    approvalResult:"同意",
    approvalNotes:form.approvalNotes,
    approver:localStorage.getItem('username'),
    materialRequisitionId:route.query.materialRequisitionId,
    subgrantor:from.subgrantor,
}
  axios.post('/mwrite/api/MaterialRequisition/CrerateAppro', hh).then(res => {
  console.log(res);
  
        if(res.data.data>0){
         ElMessage({
           message: '已通过',
          type: 'success',
        })
        router.push('/Approval/MaterialRequisitionApproveShow')
       }else{
         ElMessage.error('修改失败')
        }
    })
}



    //转批
    const submitForm = () => {
      let hh={
    approvalResult:"同意并转批",
    approvalNotes:form.approvalNotes,
    approver:localStorage.getItem('username'),
    materialRequisitionId:route.query.materialRequisitionId,
    subgrantor:from.subgrantor,
}
 axios.post('/mwrite/api/MaterialRequisition/CrerateAppro',hh).then(res=>{
        if(res.data.data>0){
         ElMessage({
           message: '已通过并转批',
          type: 'success',
        })
        router.push('/Approval/MaterialRequisitionApproveShow')
       }else{
         ElMessage.error('修改失败')
        }
    })
    }
//拒绝
const Cancel=()=>{
 
 let hh={
     approvalResult:"拒绝",
     approvalNotes:from.approvalNotes,
     approver:localStorage.getItem('username'),
     materialRequisitionId:route.query.materialRequisitionId,
     subgrantor:from.subgrantor,
 }
 axios.post('/mwrite/api/MaterialRequisition/CrerateAppro',hh).then(res=>{
         if(res.data.data>0){
          ElMessage({
            message: '已拒绝',
           type: 'success',
         })
         router.push('/Approval/MaterialRequisitionApproveShow')
        }else{
          ElMessage.error('修改失败')
         }
     })
 
 }
  
  </script>
  
  <style scoped>
  
  </style>